<template>
  <h1>目前数据量{{dataSource.length}}</h1>
  <div class="virtual-list-content">
    <ListHeader :titleList="titleList"/>
    <VirtualListScroll
        data-key="project_id"
        :data-source="dataSource"
        :loading="loading"
        :interval="3000"
        @scroll-end="scrollEnd"
        @line-scroll-end="lineScrollEnd"
        class="virtual-list"
    >
      <template #item="{ item }">
        <el-tooltip placement="top" color="rgba(73, 146, 255, 0.8)"      :popper-options="{
      modifiers: [
        {
          name: 'computeStyles',
          options: {
            adaptive: false,
            enabled: false,
          },
        },
      ],
    }">
          <template #content>
            <span>项目名：{{ item.name }}</span>
          </template>
          <div class="virtual-list-item" @click="handelClick(<DataItem>item)">
            <span class="virtual-list-item-col">{{ item.name }}</span>
            <span class="virtual-list-item-col">{{ item.influence }}</span>
            <span class="virtual-list-item-col">{{ item.trend }}</span>
            <span class="virtual-list-item-col">{{ item.response }}</span>
            <span class="virtual-list-item-col">{{ item.activity }}</span>
            <span class="virtual-list-item-col">{{ item.github }}</span>
          </div>
        </el-tooltip>
      </template>
    </VirtualListScroll>


  </div>
</template>

<script setup lang="ts">
import VirtualListScroll from '../components/VirtualListScroll/index.vue'
import ListHeader from '../components/ListHeader/index.vue'
import {TitltListItem} from "../components/ListHeader/data";
import {ElTooltip} from "element-plus";
import {ref} from "vue";


// 列表字段
const titleList: TitltListItem[] = [
  {
    label: '项目名',
    width: '20%'
  },
  {
    label: '影响力',
    width: '16%'
  },
  {
    label: '发展趋势',
    width: '16%'
  },
  {
    label: '社区反应',
    width: '16%'
  },
  {
    label: '开发活跃度',
    width: '16%'
  },
  {
    label: '指数',
    width: '16%'
  }
];
const loading = ref(true)
type DataItem = {
  project_id: number;
  influence: string;
  response: string;
  activity: string;
  trend: string;
  github: string;
  name: string;
};
// 数据员
const dataSource = ref<DataItem[]>([])
// 模拟请求
setTimeout(() => {


  for (let i = 0; i < 35; i++) {
    dataSource.value.push({
      "project_id": i,
      "influence": (58.42 * (i /10) + ''),
      "response": "31.40",
      "activity": "79.34",
      "trend": "68.78",
      "github": "60.31",
      "name": "Automattic/wp-calypso" + i
    })
  }
  loading.value = false
}, 100)

/**
 * 滚动完成
 */
const scrollEnd = () => {
  // 滚动完成后复制一份数据
  console.log('列表滚动到底部触发的方法')
}


/**
 * 单行滚动完成
 */
const lineScrollEnd =() => {
  console.log('单行滚动完成')
}

/**
 * 点击事件
 * @param item
 */
const handelClick = (item: DataItem) => {
  console.log('点击事件', item)
}
</script>

<style scoped lang="scss">

.virtual-list-content {
  display: flex;
  flex-direction: column;
  height: 500px;
  padding: 0 8px;
  background-color: #0a54ea;

  .virtual-list-item {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 4px;
    //height: 80px;
    color: rgb(255 255 255);
    cursor: pointer;

    &:hover {
      color: #68d8ff;
      background: rgb(255 255 255 / 10%);
    }

    &-col {
      width: 16%;
      overflow: hidden;
      text-align: center;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    &-col:nth-child(1) {
      width: 19.5%;
      text-align: left;
    }
  }
}
</style>
